<template>
    <div>
      <!-- 2. 左部导航 -->
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
              :default-active="$route.path"
              router
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="/help/aboutus">
              <span slot="title">关于我们</span>
            </el-menu-item>
            <el-menu-item index="/help/commonproblem">
              <span slot="title">常见问题</span>
            </el-menu-item>
            <el-menu-item index="/help/serve">
              <span slot="title">在线客服</span>
            </el-menu-item>
            <el-menu-item index="/help/update">
              <span slot="title">更新公告</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <!-- 3. 路由模块2 -->
      <router-view />
    </div>
  </template>
  <script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  .tac {
    float: left;
    //display: inline-block;
  }
  .el-menu-item.is-active {
    background-color: #951d1dd9 !important;
  }
  
  .el-menu-item.is-active {
    color: #fff;
  }
  
  .el-col-12 {
    margin-left: 20px;
    margin-top: 20px;
    width: 180px;
    padding-left: 10px;
  }
  .el-menu {
    border: none;
  }
  .el-menu-item {
    padding-left: 47px !important;
  }
  </style>